import React, { useState } from "react";

// hooks是16.8版本新增的，可以让函数组件拥有类组件的能力
// hooks要写在函数组件的顶层
// 特点：
//    聚合相同功能代码，方便阅读和维护,复用
//    相比于高阶组件，减少组件层级

// useState让函数组件能够定义state
// useState需要传入一个参数(变量的初始值)，返回一个数组(变量和改变变量的方法)

const App = () => {
  const [count, setCount] = useState(1);
  const handleClick = () => {
    // setCount可以接受一个值或者一个函数(需要依赖于前一次的值的时候)
    // 改变变量的方法是异步的
    // setCount(10);
    setCount((v) => v + 1);
    console.log(count);
  };

  const [list, setList] = useState([
    {
      name: "zhangsan",
      id: 1,
    },
  ]);
  const handleClick2 = () => {
    setList((v) => [...v, { name: "lisi", id: 2 }]);
  };

  return (
    <>
      <h2>useState</h2>
      <span>{count}</span>
      <button onClick={handleClick}>btn</button>
      <ul>
        {list.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <button onClick={handleClick2}>btn2</button>
    </>
  );
};

export default App;
